<template>
    <div class="personal-list" id="personal-list">
        <Layout>
            <Header class="header">
                <Row>
                    <Col :span="24">
                    <div>
                        <span class="border-left"></span>
                        个人代理列表
                    </div>
                    </Col>
                </Row>
            </Header>
            <Content class="content">
                <div class="search-box">
                    <Row :gutter="16" style="min-width: 1024px">
                        <Col :span="6">
                            用户账号：
                            <Input v-model="searchForm.account" placeholder="用户ID/账号" style="width:auto" />
                        </Col>
                        <Col :span="6">
                            用户昵称：
                            <Input v-model="searchForm.name" placeholder="用户昵称" style="width:auto" />
                        </Col>
                        <Col :span="6">
                            注册时间：
                            <DatePicker v-model="create_time" :options="options" :start-date="new Date(new Date() - (30*24*60*60*1000))"
                                type="daterange" placement="bottom" :value="'yyyy-MM-dd'" placeholder="请选择时间" style="width: auto"
                                @on-change="returnDate">
                            </DatePicker>
                        </Col>
                        <Col :span="6">
                            <div class="search-btn" @click="getTableData(1)">查询</div>
                        </Col>
                    </Row>
                </div>

                <div class="table-box">
                    <el-table ref="table" :data="tableData" size="mini" style="width: 100%;min-width: 800px">
                        <el-table-column align="center" prop="uid" label="用户ID"></el-table-column>
                        <el-table-column align="center" prop="user_info.account" label="用户账号"></el-table-column>
                        <el-table-column align="center" label="用户昵称">
                            <template slot-scope="scope">
                                <p>{{scope.row.user_info.name ? scope.row.user_info.name : '（暂无）'}}</p>
                            </template>
                        </el-table-column>
                        <el-table-column
                            align="center"
                            prop="user_info.rec_code"
                            label="推荐码">
                        </el-table-column>
                        <el-table-column
                            align="center"
                            prop="territory"
                            label="代理区域">
                        </el-table-column>
                        <el-table-column
                            align="center"
                            prop="rate"
                            label="提成比例">
                        </el-table-column>
                        <el-table-column
                            align="center"
                            label="代理时间">
                            <template slot-scope="scope">
                                <p>{{Usplit(scope.row.create_time,' ')[0]}}</p>
                            </template>
                        </el-table-column>
                        <el-table-column align="center" label="用户收益">
                            <template slot-scope="scope">
                                <p>￥{{(scope.row.balance * 1).toFixed(2)}}</p>
                            </template>
                        </el-table-column>
                        <el-table-column align="center" label="区域订单总额">
                            <template slot-scope="scope">
                                <p>￥{{(scope.row.region_order_total * 1).toFixed(2)}}</p>
                            </template>
                        </el-table-column>
                        <el-table-column align="center" label="已提现">
                            <template slot-scope="scope">
                                <p>￥{{(scope.row.used_cash * 1).toFixed(2)}}</p>
                            </template>
                        </el-table-column>
                        <el-table-column align="center" label="未提现">
                            <template slot-scope="scope">
                                <p>￥{{(((scope.row.balance * 100) - (scope.row.used_cash * 100))/100).toFixed(2)}}</p>
                            </template>
                        </el-table-column>
                        <el-table-column label="操作" width="200" align="center">
                            <template slot-scope="scope">
                                <el-button type="text" size="small" @click="look(scope.row)">查看详情</el-button>
                                <el-button type="text" size="small" @click="edit(scope.row)">编辑</el-button>
                                <el-button type="text" size="small" @click="openCash(scope.row)">提现记录</el-button>
                                <!-- <el-button type="text" size="small" @click="roleConfig(scope.row.id,scope.row.role_id,scope.row.territory,scope.row.rate)">角色设定</el-button> -->
                                <!-- <el-button type="text" size="small" @click="del(scope.row.id)">删除</el-button> -->
                            </template>
                        </el-table-column>
                    </el-table>
                </div>

                <el-dialog width="40%" title="代理信息编辑" :visible.sync="dialogFormVisible" class="dialog_box" :before-close="handleCancel" :close-on-click-modal="false">
                    
                    <div class="ivu-form" style="margin-top:20px;width:100%">
                        <div class="ivu-form-item">
                            <label class="ivu-form-item-label" style="width: 160px;">个人代理提成比</label>
                            <div class="ivu-form-item-content u_content" style="margin-left: 120px;">
                                <Input v-model="formData.rate" style="width:100px;margin-right: 10px" placeholder="个人代理提成">
                                    <span slot="append">%</span>
                                </Input>
                                <!-- <DatePicker @on-change="dateSet($event,formData.partner)" :options="options" :start-date="new Date(new Date() - (30*24*60*60*1000))"
                                    type="date" placement="bottom" format="yyyy-MM-dd" placeholder="成为合伙人时间" style="width: auto">
                                </DatePicker> -->
                            </div>
                        </div>
                    </div>
                    <div slot="footer" class="dialog-footer">
                        <el-button @click="handleCancel">取 消</el-button>
                        <el-button type="primary" @click="handleSubmit">确 定</el-button>
                    </div>
                </el-dialog>

                <Cash v-if="cashShow" :userData="userData" :isShow="cashShow" @close="closeCash"></Cash>

                <div class="page-box">
                    <Page :total="total" :page-size="pageSize" show-elevator show-total @on-change="pageChange" />
                </div>
            </Content>
            <Footer>
                <p class="copy-right">Copyright © {{host}}, All Rights Reserved.</p>
            </Footer>
        </Layout>
    </div>
</template>

<script>
    import * as api from '@/api/api'
    import CashList from '@/components/Cash'
    export default {
        data() {
            return {
                host: window.location.host,
                loading: this.$store.state,
                searchForm: {
                    account: '',
                    name: ''
                },
                create_time_search: '',
                create_time: ['', ''],
                options: {
                    disabledDate(date) {
                        return date && date.valueOf() > Date.now();
                    }
                }, //日期选择范围配置
                tableData: [], //表格数据
                dialogFormVisible: false,
                roles: [],
                selectedRoles: [],
                province: [], //省
                town: [], //市
                area: [], //区县
                formData: {
                    rate: '',
                    balance: '',
                    rec_balance: '',
                    region_order_total: '',
                    address: []
                },
                editUserId: null,
                isAreaShow: false,
                isTownShow: false,
                isProviceShow: false,
                isRateShow: false,
                total: 0, //数据总条数
                pageSize: 10, //每页显示条数
                current_page: 1, //当前页码
                cashShow: false,
                userData: ''
            }
        },

        components: {
            Cash: CashList
        },

        mounted() {
            this.getTableData(0);
        },

        computed: {

        },

        watch: {

        },

        methods: {
            pageChange(current_page) {
                this.current_page = current_page;
                this.getTableData(3);
            },

            getTableData(index) {
                if (index === 1 || index === 0) {
                    this.current_page = 1;
                };
                let body = {
                    uid: 1,
                    offset: this.current_page - 1,
                    limit: this.pageSize
                }
                if(this.searchForm.name) {
                    body.search_name = this.searchForm.name
                }
                if(this.searchForm.account) {
                    body.search_account = this.searchForm.account
                }
                if(this.create_time_search[0] && this.create_time_search[1]) {
                    body.search_time = this.create_time_search[0];
                    body.end_time = this.create_time_search[1];
                }
                this.loading.isLoading = true;
                api.getPersonalList(body).then(res => {
                    this.loading.isLoading = false;
                    if (res.data.code === 200) {
                        let data = res.data.data
                        this.total = data.count * 1;
                        this.tableData = data.data;
                    } else {
                        this.$Notice.error({
                            title: '错误',
                            desc: res.data.msg
                        });
                    }
                }).catch(err => {
                    this.loading.isLoading = false;
                    this.$Notice.error({
                        title: '错误',
                        desc: '服务器错误,请联系管理员（' + err + '）',
                    });
                });
            },
            returnDate(date) {
                if (date[0] == '') {
                    this.create_time_search = '';
                    return false;
                }
                let newTime = '';
                for (let index = 0; index < date.length; index++) {
                    let one = date[index];
                    let time1 = one.split(' ')[0];
                    if (index === 1) {
                        newTime = newTime + '&' + time1 + ',between';
                    } else {
                        newTime = newTime + time1;
                    }
                }
                this.create_time_search = newTime;
            },
            look(row) {
                this.$router.push({
                    name: 'UserDetails',
                    params: {
                        userId: row.uid,
                        balance: row.balance
                    }
                })
            },

            Usplit(str,re) {
                return str.split(re);
            },

            edit(item) {
                this.dialogFormVisible = true;
                this.formData.address.push(item.territory.split('/')[0],item.territory.split('/')[1],item.territory.split('/')[2] + ',' + item.city_id);
                this.formData.rate = item.rate;
                this.formData.balance = item.balance;
                this.formData.region_order_total = item.region_order_total;
                this.formData.rec_balance = item.rec_balance;
                this.formData.agent_time = item.create_time;
                this.formData.id = item.id;
            },

            handleSubmit() {
                let body = this.formData;
                this.loading.isLoading = true;
                api.editAgentInfo(body).then(res => {
                    this.loading.isLoading = false;
                    if(res.data.code === 200) {
                        this.$Notice.success({
                            title: '提示',
                            desc: '修改成功！'
                        });
                        this.dialogFormVisible  = false;
                        this.getTableData()
                    }else {
                        this.$Notice.error({
                            title: '错误',
                            desc: '修改失败'
                        });
                    }
                }).catch(err => {
                    this.$Notice.error({
                        title: '错误',
                        desc: '服务器开小差了，请稍后再试！'
                    });
                })
            },

            handleCancel() {
                this.dialogFormVisible = false;
            },

            openCash(item) {
                this.userData = item;
                this.cashShow = true;
            },

            closeCash() {
                this.userData = '';
                this.cashShow =  false;
            },
        }
    }

</script>


<style lang="less">
    @import '../../assets/styles/constant.less';

    .personal-list {
        width: 100%;
        height: 100%;
        overflow-x: hidden;
        overflow-y: auto;
        background-color: #f5f7f9;

        .ivu-layout {
            min-height: 100%;
        }

        .header {
            font-size: 14px;
            line-height: 40px;
            height: 40px !important;
            color: #434343;
            padding: 0 50px;
            background-color: @background;
            border-bottom: 1px solid #ddd;

            .border-left {
                border-left: 5px solid @baseColor;
                margin-right: 4px;
            }
        }

        .content {
            width: 100%;
            min-height: 76%;
            padding: 20px 60px;

            .search-box {
                .search-btn {
                    width: 100px;
                    height: 32px;
                    line-height: 32px;
                    text-align: center;
                    background-color: @greenColor;
                    border-radius: 4px;
                    color: #fff;
                    cursor: pointer;
                }
            }

            .table-box {
                margin-top: 20px;
                width: 100%;

                .el-table th {
                    background-color: #eee;
                    color: #333;
                    font-size: 14px;
                }

                .el-button--text {
                    color: @greenColor;
                }
            }

            .dialog_box {
                .role_edit_box {
                    display: flex;
                }

                .fead {
                    transition: all 0.3s;
                }

                .fead.show {
                    height: 32px;
                    margin-bottom: 24px;
                    overflow: initial;
                }

                .hidden {
                    height: 0;
                    overflow: hidden;
                    margin-bottom: 0;
                }
            }

            .page-box {
                height: 50px;
                line-height: 50px;
                text-align: right;
                background-color: #fff;
                padding: 0 20px;
            }
        }

        .copy-right {
            text-align: center;
            color: #aaa;
            font-size: 12px;
        }
    }
    #personal-list {
        .right .ivu-form-item-content {
            text-align: right;
        }
        .ivu-form-item-content .el-checkbox-group{
            display: flex;
            flex-wrap: wrap;
            // justify-content: space-between;
            .el-checkbox--mini {
                margin-top: 0;
                margin-left: 0;
                margin-right: 10px;
                margin-bottom: 10px;
                width: 22%;
                min-width: 96px;
            }
        }
        .fead {
            transition: all 0.3s;
        }

        .fead.show {
            height: auto;
            margin-bottom: 24px;
            overflow: initial;
        }

        .hidden {
            height: 0;
            overflow: hidden;
            margin-bottom: 0;
        }
        .u_content {
            margin-left: 120px;
            display: flex;
            flex-wrap: wrap;
        }
        .u_input_box {
            display: flex;
            flex-wrap: wrap;
            width: 100%
        }
        .u_input {
            width:200px;
            display: inline-block;
            margin-right: 4px;
            margin-bottom: 10px;
        }
        .addBtn {
            display: inline-block;
            border: 1px dashed #aaa;
            padding: 0 10px;
            height: 32px;
            cursor: pointer;
            margin-left: 10px;
        }
    }
</style>
